Кужелев Евгений #45
Кужелев Евгений #45
Conversation
|
🍅 Не пройден линтинг или базовые тесты |
|
🍅 Не пройден линтинг или базовые тесты |
|
🍅 Не пройден линтинг или базовые тесты |
|
🍅 Не пройден линтинг или базовые тесты |
|
🍅 Не пройден линтинг или базовые тесты |
|
🍅 Не пройден линтинг или базовые тесты |
|
🍅 Не пройден линтинг или базовые тесты |
|
🍅 Не пройден линтинг или базовые тесты |
|
🍏 Пройден линтинг и базовые тесты |
|
🍏 Пройден линтинг и базовые тесты |
|
|
| margin: 0 1%; | ||
| } | ||
|
|
||
| thead |
There was a problem hiding this comment.
лучше не использовать в селекторах названия тегов, так как на странице может быть несколько таких тегов, которые должны отображаться по-разному. А получаетсся, что будут отображаться одинаково. Лучше использовать классы
There was a problem hiding this comment.
к верхнему посту. я так понял, что суть в том, что если браузер не поддерживает операции с колонками, то на это стоит забить, вместо переделывания верстки
There was a problem hiding this comment.
теги стоит совсем убрать или селекторы типа .class tag можно использовать?
| break-inside: avoid; | ||
| } | ||
|
|
||
| .col3 |
| font-size: .8rem; | ||
| } | ||
|
|
||
| .imgblock |
| </div> | ||
| </header> | ||
| <hr> | ||
| <div class="main"> |
| </header> | ||
| <hr> | ||
| <div class="main"> | ||
| <div class="article"> |
There was a problem hiding this comment.
тег section
класс лучше назвать по-другому, чтобы не запутаться в тегах и классах, а то называются одинаково
|
🍏 Пройден линтинг и базовые тесты |
|
Поэкспериментировав со свойством column-fill пришел к выводу, что перенос статьи в другую колонку это лучшее решение в firefox, значении auto становится только хуже |
|
🍏 |
|
🍅 Не пройден линтинг или базовые тесты |
|
🍏 Пройден линтинг и базовые тесты |
| margin: 15px 0; | ||
| } | ||
|
|
||
| .column-3 |
There was a problem hiding this comment.
Лучше называть более понятно, например, three-columns-text
| font-size: 1.5rem; | ||
| } | ||
|
|
||
| .l |
There was a problem hiding this comment.
это имя персонажа, оно всегда таким шрифтом было. ну не суть
There was a problem hiding this comment.
Я читал мангу, смотрел аниме и экранизацию, но название класса осуждаю. Переименовать.
|
🚀 |
|
🍏 Пройден линтинг и базовые тесты |
| @font-face | ||
| { | ||
| font-family: Cloister Black; | ||
| src: url(cloisterblack-webfont.woff2) |
There was a problem hiding this comment.
Пожалуйста, выровняй format на линии с url к которому он относится. Если тебя беспокоит линтер по поводу запятых, запятые можешь оставить на той же линии где они находятся сейчас. Так же добавь пожалуйста к шрифтам директиву local.
| html | ||
| { | ||
| font-size: 16px; | ||
| margin: 0 1%; |
There was a problem hiding this comment.
не понял в чем конкретно проблема здесь. все размеры шрифтов у меня заданы через rem, значит мне нужно задать font-size у html. margin могу перенести в body, без него появляется горизонтальная полоса прокрутки
|
|
||
| .head | ||
| { | ||
| width: 100%; |
There was a problem hiding this comment.
Элемент header по умолчанию блочный, зачем ему указывать такую ширину?
| .head div, | ||
| .head h1 | ||
| { | ||
| display: inline-block; |
There was a problem hiding this comment.
Зачем делать info и subinfo - display: inline-block, если визуально они выглядят как блочные и им еще руками приходится задавать ширину?
| .head h1 | ||
| { | ||
| display: inline-block; | ||
| margin-bottom: 1%; |
There was a problem hiding this comment.
Вертикальные процентные margin очень редкая практика - и это явно не нужно в твоем случае
| Tim Miller has vacated the director’s chair on Deadpool 2, | ||
| it seems that 20th Century Fox is wasting little time in securing a replacement.</p> | ||
| <div class="img-block"> | ||
| <img src="david_leitch.jpg" alt="david leitch"> |
There was a problem hiding this comment.
alt слишком короткий и написан не корректно (имена пишутся с заглавных букв). Пожалуйста, дай более полное описание картинке. Обязательно нужно выставлять аттрибуты width и height изображениям. А так же заполнять title (можно продублировать из alt)
| <h3>Death Note (2017 film) info</h3> | ||
| <div class="img-block height400"> | ||
| <img src="l.jpg" alt="l"> | ||
| <p>I am <span class="l">L</span>, motherfucker</p> |
| <section> | ||
| <h3>Death Note (2017 film) info</h3> | ||
| <div class="img-block height400"> | ||
| <img src="l.jpg" alt="l"> |
There was a problem hiding this comment.
Опять таки, плохой alt, нужно добавить width, height, title. Исходник картинки больше необходимого по ширине в два раза, нужно выводить исходные изображения того размера, какого они будут в верстке.
There was a problem hiding this comment.
Я не понял, что нужно сделать с width и height. Webstorm по умолчанию вставляет размеры изображения в эти параметры, какого размера должна быть картинка в итоге я знать не могу, до того как узнаю ширину колонки. Что от меня требуется?
There was a problem hiding this comment.
Сорри, запутал тебя. Для фиксированных размером картинок width/height обязателен в аттрибутах. Для резиновых нет.
| <div class="weather"> | ||
| <h4>NY Weather</h4> | ||
| <p> | ||
| SUN OCT 30 Partly cloudy in the morning. Increasing clouds |
| </p> | ||
| </div> | ||
| <h1>Cinema News</h1> | ||
| <div class="rate"> |
|
🍏 Пройден линтинг и базовые тесты |
|
🍏 |
|
|
||
| body | ||
| { | ||
| margin: 0 1%; |
There was a problem hiding this comment.
Ну зачем здесь этот несчастный 1%?) Укажи какое-нибудь фиксированное число в px. Кстати текст снизу сильно прижат к краю экрана.
| <section> | ||
| <h3>Death Note (2017 film) info</h3> | ||
| <div class="img-block"> | ||
| <img width="807" height="627" src="l.jpg" alt="Death Note Netflix mem" |
There was a problem hiding this comment.
Исходное изображение больше необходимого (даже для экрана 1920px)
|
Еще нужен пример вертикального текста |
|
🍅 Не пройден линтинг или базовые тесты |
|
🍏 Пройден линтинг и базовые тесты |
|
|
||
| .vertical-text | ||
| { | ||
| float: left; |
| text-align: center; | ||
| text-transform: uppercase; | ||
| word-wrap: break-word; | ||
| width: 1ch; |
There was a problem hiding this comment.
Очень редкая единица размера. Может лучше em?
|
Едет на широком экране |
|
Also, я не против |
|
🍏 Пройден линтинг и базовые тесты |
Посмотреть решение